<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--02: 引入react 核心文件   -->
    <script src="../js/react.js"></script>
    <script src="../js/react-dom.js"></script>
    <!--
           引入babel.js 文件
          作用:将es6 或者jsx语法编译成浏览器可以识别的es5的语法
      -->
    <script src="../js/babel.js"></script>
</head>

<body>
    <div id="root">

    </div>

</body>

</html>
<script type="text/babel">
    // 使用jsx 语法, 需要再vscode中安装插件 "js jsx Snippets"

    // jsx 语法的特点:
    // 01: jsx 语法中必须有一个根节点
    // 02: 在jsx中使用注释的时候 格式为 {/*要注释的代码*/}
    // 03: jsx 中使用变量插值表达式,{}

    const rootDOM = document.querySelector('#root')
    const root = ReactDOM.createRoot(rootDOM);

    const num = 100;
    const bool = true
    const age = 18
    const user = {
        name: '杨国栋',
        age: 20
    }
    const nameArr = ['张世龙', '梁润吉', '于鑫']
    //思考: 数组遍历可以使用forEach 吗?
    const imgUrl = ''
    const style = { background: 'red', fontSize: '30px' }
    const linkStr = '<a href="https://www.baidu.com">百度一下 你就知道</a>'
    const str = 'react so easy!!!'
    root.render(
        <div>
            {/*<p>测试</p>*/}
            <p>num:{num}</p>
            <p>bool:{bool}</p>
            <p>三目运算符:{age >= 18 ? '成年' : '未成年'}</p>
            <p>{undefined}</p>
            <p>{null}</p>
            <p>{user.name}--{user.age}</p>
            {/*可以直接遍历数组在react中*/}
            <p>{nameArr}</p>  {/*<p>'张世龙', '梁润吉', '于鑫'</p>*/}
            {/*遍历li*/}
            <ul>
                {
                    nameArr.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
            {/*<img src={imgUrl} alt="" />*/}
            {/*相当于vue中的v-html*/}
            <p dangerouslySetInnerHTML={{ __html: linkStr }}></p>
            <p style={style}>设置样式</p>
            <p>{str.substring(5)}</p>
        </div>

    )


</script>